<template>
	<view class="video">
		<!-- 导航区域 -->
		<view class="topbar">
			<scroll-view class="scroll-view" scroll-x="true" :show-scrollbar="false" enable-flex scroll-with-animation>
				<!-- 导航条 -->
				<view class="item" v-for="(item,index) in navList" :key="item.id" :class="{active: navId==item.id}"
					@click="switchNav(item.id, index)">
					<view class="desc">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 视频列表区域 -->
		<mescroll-uni :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="video-list">
				<view class="video-item" v-for="(item, index) in videoList" :key="item.id">
					<view class="video-wrap">
						<video v-if='videoId === item.data.vid' :src="item.data.urlInfo" class="img" @play='handlePlay'
							:id='item.data.vid' :poster='item.data.coverUrl' object-fit='cover'
							@timeupdate='handleTimeUpdate' @ended="handleEnded" />
						<image v-else @tap='handlePlay' :src="item.data.coverUrl" :id='item.data.vid' mode=""
							class="img"></image>
						<view class="desc ellipsis">
							{{item.data.title}}
						</view>
						<view class="footer">
							<image class="avatar" :src="item.data.creator.avatarUrl"></image>
							<text class="nickName">{{item.data.creator.nickname}}</text>
							<view class="comments_praised">
								<button open-type="share" class="item btn">
									<text class="iconfont icon-gengduo">=</text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		apiGetGroupList,
		apiGetVideoData,
		apiGetVideoUrl
	} from '../../apis/index.js'
	import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
	export default {
		data() {
			return {
				navList: [],
				navId: '',
				videoList: [],
				downOption: { //下拉刷新
					auto: false
				},
				upOption: { //上拉加载下一页
					auto: false,
					page: {
						num: 0, //起始页
						size: 10, //一页条数
					}
				},
				videoId: '', // 显示视频不是图片的标识
				videoTimeUpdate: [],
			}
		},
		components: {
			MescrollUni,
		},
		onLoad() {
			this.getVideoGroupListData()
		},
		methods: {
			// 视频导航列表
			async getVideoGroupListData() {
				const result = await apiGetGroupList()
				if (result.code == 200) {
					this.navList = result.data.slice(0, 14)
					this.navId = result.data[0].id
				}
				this.getVideoList(this.navId) //没登录所以无法使用video/group接口
			},
			// 切换导航
			switchNav(itemId) {
				this.navId = itemId
				this.videoList = []
				uni.showLoading({
					title: '加载中',
				})
				this.getVideoList(this.navId)
			},
			async getVideoList(id) {
				const videoListData = await apiGetVideoData(id)
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				// console.log(videoListData)
				let index = 0
				let videoList = videoListData.datas.length > 0 && videoListData.datas.map(item => {
					item.id = index++;
					return item
				})
				// Url列表
				let videoUrlList = []
				// 获取Url
				for (let i = 0; i < videoList.length; i++) {
					let videoUrlItem = await apiGetVideoUrl({
						id: videoList[i].data.vid
					})
					videoUrlList.push(videoUrlItem.urls[0].url)
				}
				// 将Url导入进videoList中
				for (let i = 0; i < videoUrlList.length; i++) {
					videoList[i].data.urlInfo = videoUrlList[i]
				}
				this.videoList = videoList
				// console.log(this.videoList)
			},
			//下拉刷新回调
			downCallback(mescroll) {
				console.log("downcallback")
				//重置列表为第一页(自动执行page.num=1，再触发upcallback方法)
				mescroll.resetUpScroll();
			},
			//上拉加载回调
			upCallback(mescroll) {
				console.log("upcallback", mescroll)
				//加载下一页数据

			},
			handlePlay(event) {
				// console.log(event)
				let vid = event.currentTarget.id
				// this.vid !== vid && this.videoContext && this.videoContext.stop()
				// this.vid = vid
				// _展示video回调
				this.videoId = vid
				this.videoContext = uni.createVideoContext(vid)
				// // 判断视频是否播放过
				let {
					videoTimeUpdate
				} = this
				let videoItem = videoTimeUpdate.find(item => item.vid === vid)
				if (videoItem) {
					let timepoint = videoItem.currentTime
					this.timer1 = setTimeout(() => {
						let videoContext1 = uni.createVideoContext(vid)
						videoContext1.seek(timepoint)
						videoContext1.play()
					}, 200)
				} else {
					this.timer2 = setTimeout(() => {
						let videoContext2 = uni.createVideoContext(vid)
						videoContext2.play()
					}, 200)
				}
				this.videoContext.play()
				// 如何找到上一个视频 关闭
				// 如何确认点击播放的视频和正在播放的视频不是同一个
			},
			// 记录播放进度
			handleTimeUpdate(event) {
				// console.log(event)
				let videoTimeObj = {
					vid: event.currentTarget.id,
					currentTime: event.detail.currentTime
				}
				// 判断是否有记录过，只需要最后的时间
				let {
					videoTimeUpdate
				} = this
				let videoItem = videoTimeUpdate.find(item => item.vid === videoTimeObj.vid)
				if (videoItem) {
					videoItem.currentTime = event.detail.currentTime
				} else {
					videoTimeUpdate.push(videoTimeObj)
				}
				this.videoTimeUpdate = videoTimeUpdate
			}
		}
	}
</script>

<style lang='scss'>
	.topbar {
		height: 86rpx;
	}

	.scroll-view {
		position: fixed;
/* 		top: 86rpx; */
		width: 100%;
		height: 86rpx;
		white-space: nowrap;
		text-align: center;
		line-height: 86rpx;
		color: #333;
		font-weight: 600;
		border-bottom: 1rpx solid #e6e6e6;
		z-index: 10;
		background: #fff;

		.item {
			position: relative;
			display: inline-block;
			min-width: 126rpx;
			height: 86rpx;
			line-height: 86rpx;
			padding: 0 20rpx;

			&.active {
				color: #f32628;
				border-bottom: 5rpx solid #f32628;
			}
		}
	}

	.video-list {
		color: #333;
		background: #f8f8f8;

		.tit-bar {
			padding-left: 32rpx;
		}

		.video-item {
			padding-top: 32rpx;
			background: #fff;
			border-bottom: 24rpx solid #f8f8f8;
		}

		.video-wrap {
			width: 686rpx;
			margin: 0 auto;
		}

		.img {
			display: block;
			width: 686rpx;
			height: 390rpx;
			border-radius: 10rpx;
			background: #eee;
		}

		.desc {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 84rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}
	}

	.creater-bar {
		height: 100rpx;
		justify-content: space-between;
		align-items: center;

		.avactor-box {
			align-items: center;
		}

		.avactor {
			width: 66rpx;
			height: 66rpx;
			margin-right: 10rpx;
			border-radius: 66rpx;
			background: #eee;
		}

		.name {
			line-height: 100rpx;
		}
	}

	.footer {
		border-top: 1rpx solid #eee;
		padding: 20rpx 0;
	}

	.footer .avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		vertical-align: middle;
	}

	.footer .nickName {
		font-size: 26rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}

	.footer .comments_praised {
		float: right;
	}

	.comments_praised .btn {
		display: inline;
		padding: 0;
		background-color: transparent;
		border-color: transparent;
	}

	.comments_praised .btn:after {
		border: none;
	}

	.comments_praised .item {
		margin-left: 50rpx;
		position: relative;
	}

	.comments_praised .item .count {
		position: absolute;
		top: -20rpx;
		font-size: 20rpx;
	}
</style>
